<template>
  <div class="wrap">
    <div class="title">
      <div>交易管理 </div>
      <div></div>
      <div>我的团队人员分布</div>
    </div>
    <!-- <div class="sear">
      <div style="font-size:16px;color:#9A9A9A">日期篩選</div>
        <div>
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="開始日期"
            end-placeholder="結束日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
      </div>
      <div>
        <div class="btn" @click="btn">
            查詢
        </div>
      </div>
    </div> -->
    <div class="content">
      <!-- <div class="mytitle">
        <div :class="showType == 0?'select':'unselect'" @click="changeorder(0)">我的職位</div>
        <div :class="showType == 1?'select':'unselect'" @click="changeorder(1)">我的PV</div>
        <div :class="showType == 2?'select':'unselect'" @click="changeorder(2)">我的團隊分成</div>
        <div :class="showType == 0?'select':'unselect'" @click="changeorder(3)">我的團隊人員分布情況</div>
      </div> -->
      <!-- <div v-if="showType == 0"> -->
        <div class="work">
          <div class="mywork">我的團隊人員分布情況</div>
          <div class="dengji">
            <div class="dengleft">
              <el-table
                v-loading="loading"
                :data="tableData"
                border
                style="width: 100%;">
                <el-table-column
                  prop="postName"
                  label="等級"
                  align='center'
                >
                </el-table-column>
                <el-table-column
                  prop="num"
                  label="人數"
                  align='center'
                >
                </el-table-column>
                <el-table-column label="操作" align='center'>
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)">查看詳情</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="dengright">
              <el-table
                :data="tableData1"
                v-loading="loading"
                border
                style="width: 100%">
                <el-table-column
                  prop="beltNum"
                  label="代"
                  align='center'
                >
                </el-table-column>
                <el-table-column
                  prop="peopleNum"
                  align='center'
                  label="人數"
                >
                </el-table-column>
                <el-table-column label="操作" align='center'>
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit1(scope.$index, scope.row)">查看詳情</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
     <!-- 分頁 -->
      <!-- <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page" :page-size="limit" 
            :page-sizes='[8,16]' layout="total,sizes, prev, pager, next, jumper " :total="total">
        </el-pagination>
      </div> -->
    </div>
  </div>
</template>
<script>
  import {mylist} from '@/api/car'
// import {validatePhoneTwo,validateEMail,validatePassword,validateReferral,validateXing,validateMonth,validateDay} from '@/utils/validate';
// import {list} from '@/api/order';
import { getToken } from '@/utils/auth' // 驗權
import {getTeamFans} from '@/api/pv'
export default {
  data(){
    return{
      showType:0,
      list:[],
      limit:8,//每頁顯示數
      page:1,//第幾頁
      total:0,//總數
      value1:null,
      tableData:[],
      tableData1:[],
      tableData: [
        {postName:'普通會員',num:0,post:1},
        {postName:'經銷商',num:0,post:2},
        {postName:'副總監',num:0,post:3},
        {postName:'總監',num:0,post:4},
        {postName:'區域總監',num:0,post:5},
        {postName:'高級區域總監',num:0,post:6},
        {postName:'亞洲總監',num:0,post:7},
        {postName:'亞太區總監',num:0,post:8},
        {postName:'環球總監',num:0,post:9},
      ],
      loading:true
      // tableData1:[
      //   {da:'第壹代',num:200},
      //   {da:'第二代',num:200},
      //   {da:'第三代',num:200},
      //   {da:'第四代',num:200},
      //   {da:'第五代',num:200},
      //   {da:'第六代',num:200}
      // ]
    }
  },
  mounted(){
    this.getdata()
  },
  methods: {
    // 获取数据
    getdata(){
      this.loading = true
      getTeamFans({userId:getToken()}).then(response => {
        if(response.errno == 0){
          this.tableData1 = response.data.beltList
          response.data.teamFanVo.forEach(Element => {
            this.tableData.forEach(ele => {
              if(Element.post == ele.post){
                ele.num = Element.num
              }
            })
          })
          this.loading = false
        }else{
          this.tableData1 = []
          this.tableData = []
          this.loading = false
        }
      })
    },
    goorderfinish(){
      this.$router.push({path:'/orderfinish'})
    },
    // 查看详情
    handleEdit(index,row){
      this.$router.push({path:'/team_member_detail',query:{type:1,post:row.post}})
    },
    handleEdit1(index,row){
      this.$router.push({path:'/team_member_detail',query:{type:2,ids:row.beltPeoples}})
    },
     // 分頁
    handleSizeChange(val) {
      this.limit = val;
      this.getdata();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getdata();
    },
    btn(){
      console.log(this.value1)
    }
  }
}
</script>
<style scoped>
  .wrap{
    width: 100%;
    /* height: 1358px; */
    background: #F5F5F5;
    box-sizing: border-box;
    
  }
  .title{
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px 20px 20px;
    border-bottom: 1px solid #D8D8D8;
    background: #fff;
    display: flex;
    align-items: center;
    padding-bottom: 20px;
  }
  .title>div:nth-child(1){
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 3px solid #333333;
  }
  .title>div:nth-child(2){
    width: 8px;
    height: 2px;
    background: #333333;
    margin: 0px 10px;
  }
  .title>div:nth-child(3){
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 3px solid #333333;
  }
  .content{
    width: 100%;
    margin: 0 auto;
    background: #fff;

  }
  .mytitle{
    width: 100%;
    box-sizing: border-box;
    height: 70px;
    align-items: center;
    border-bottom: 1px solid #D8D8D8;
    background: #fff;
    display: flex;
    align-items: center;
  }
  .mytitle div{  
    padding:0 20px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
  }
  .work{
    width: 100%;
    background: #FFFFFF;
  }
  .mywork{
    height: 104px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #101010;
  }
  .dengji{
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  /* .dengji div{
    width: 50%;
    text-align: center;
    justify-content: center;
  } */
  .dengji>>>.el-table th.is-leaf {
    border-bottom: 0.005208rem solid #EBEEF5;
    text-align: center; 
    border: none;
    height: 78px;
    background: #F5F5F5;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
}
  .dengleft{
    width: 50%;
    text-align: center;
    justify-content: center;
  }
  .dengright{
    width: 50%;
    text-align: center;
    justify-content: center;
  }
  .dengji>>>.el-button:focus, .el-button:hover {
    color: #BE9A67;
    border-color: #fff;
    background-color: #fff;
}
.el-button--mini, .el-button--mini.is-round {
    padding: 0.036458rem 0.078125rem;
      color: #fff;
    border-color: #BE9A67;
    background-color: #BE9A67;
}
.pagination-container{
    background: #fff;
    height: 60px;
    display: flex;
    align-items: center;
}
.sear{
    display: flex;
    align-items: center;
    height:59px;
    background: #fff;
    border-bottom: 1px solid #D8D8D8;
}
.sear div{
    margin-left: 15px;
}
.btn{
   width: 93px;
   height: 35px;
   background: #BE9A68;
   border-radius: 4px;
   font-size: 16px;
   color: white;
   line-height: 35px;
   text-align: center;
}
.pagination-container>>>.el-pagination.is-background .el-pager li:not(.disabled).active{
  background: #BE9A67;
  color: white;
}
.pagination-container>>>.el-pagination.is-background .el-pager li:hover{
  color: #BE9A67;
}
.pagination-container>>>.el-pagination__editor.el-input .el-input__inner:hover,.pagination-container>>>.el-pagination__editor.el-input .el-input__inner:active{
  border-color: #BE9A67;
}
.pagination-container>>>.el-input__inner:active{
  border-color: #BE9A67;
}
.pagination-container>>>.el-select .el-input.is-focus .el-input__inner,.pagination-container>>>.el-pagination__sizes .el-input .el-input__inner:hover,.pagination-container>>>.el-select .el-input__inner:focus{
  border-color: #BE9A67;
}
.pagination-container>>>.el-input__inner:focus{
  border-color: #BE9A67;
}
</style>